<template>
    <div>
        
        <div class="featureHead">
           <span>选择搜索模块</span> 
        </div>

        <div class="featureBody">
           <div class="featureB">
               <div class="body bodyleft" @click="tomeagtive">
                   <img src="../../assets/feature1.png" alt="">
                   <div>新建任务-负面舆情</div>
               </div>
            <div class="body" @click="tofivePlate">
                <img src="../../assets/feature2.png" alt="">
                <div>新建任务-五大模块</div>
            </div>
            </div>  
        </div>
        
    </div>
</template>

<script>
export default {
    methods: {
        tomeagtive() {
            this.$router.push({path: '/negative'})
        },
        tofivePlate() {
            this.$router.push({path: '/fivePlate'})
        }
    }

}
</script>

<style lang="scss" scoped>
    .featureHead {
        position: relative;
        height: 240px;
        width: 100%;
        span {
            transform: translateX(-50%);
            position: absolute;
            bottom: 67px;
            font-size:30px;
            font-weight:bold;
            color:rgba(45,50,67,1);
        }
    }
    .featureBody {
        cursor: pointer;
        .featureB {
            display: flex;
            justify-content: center;
            .body{
            position: relative;
            width: 312px;
            height: 312px;
            background:rgba(255,255,255,1);
            box-shadow:0px 3px 21px 0px rgba(0, 0, 0, 0.19);
            border-radius:19px;
            img {
                margin-top: 56px;
                margin-bottom: 77px;
            }
            div {
                position: absolute;
                width: 100%;
                left: 50%;
                transform: translateX(-50%);
                bottom: 40px;
                font-size:22px;
                color:rgba(45,50,67,1);
            }
            // text-align: center;
            }
            .bodyleft {
                margin-right: 80px;
            }
        }
    }
</style>

